<template>
  <div id="staff-project">
    <!-- 标题 -->
    <!-- 面包屑 -->
    <span class="employee-hui">员工管理 / </span>
    <span>组织架构</span>

    <!-- 主内容 -->
    <div class="project-box">
      <!-- 左 -->
      <div class="project-left">
        <!-- 搜索 -->
        <div class="project-left-sousuo">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
          ></el-input>
        </div>

        <!-- 按钮 -->
        <div class="project-left-box">
          <el-button @click="dialogVisible = true">添加公司</el-button>
          <el-button>导出架构</el-button>
        </div>

        <!-- 添加公司 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <!-- 表单 -->
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="addCompany"
          >
            <el-form-item label="公司名称">
              <el-input v-model="addCompany.com"></el-input>
            </el-form-item>
          </el-form>
          <!-- 确认取消 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 原型链 -->
        <div class="project-left-chain">
          <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            :default-expand-all="true"
            @node-click="handleNodeClick"
            ><!--   @node-click="handleNodeClick" -->
          </el-tree>
        </div>
      </div>

      <!-- 右 -->
      <div class="project-right">
        <div class="project-right-title">
          <!-- 按钮 -->

          <!-- 导航 -->
          <div class="project-right-title-dh">
            <span>{{ corporateName }} > </span><span>{{ dangQianBuMen }}</span>
          </div>

          <!-- 领导 -->
          <div class="project-right-title-ld">
            <span>部门领导：</span> <span>{{ dangQianLingDao[0].name }}</span>
          </div>

          <!-- 下级架构 -->
          <div class="project-right-framework">
            <!-- 灰色条条 -->
            <div class="project-right-framework-hui">
              <!-- 灰左 -->
              <div class="project-right-framework-hui-left">下级架构</div>
              <!-- 灰右 -->
              <div class="project-right-framework-hui-right"></div>
            </div>
            <!-- 线 -->
            <div class="project-right-line">
              <div v-if="dis">
                <div
                  v-for="item in tableData"
                  :key="item.work_id"
                  class="div_bottom"
                >
                  <span>{{ item.department_name }}</span>
                </div>
              </div>
              <div v-else class="div_bottom">
                <span>无</span>
              </div>
            </div>
          </div>

          <!-- 下设人员 -->
          <div style="margin: 3% 0 0 0">
            <div class="project-right-framework">
              <!-- 灰色条条 -->
              <div class="project-right-framework-hui">
                <!-- 灰左 -->
                <div class="project-right-framework-hui-left" v-if="dis">
                  部门主管
                </div>
                <div class="project-right-framework-hui-left" v-else>
                  部门人员
                </div>
                <!-- 灰右 -->
              </div>
              <!-- 线 -->
              <div class="project-right-line">
                <div
                  v-for="item in tableData"
                  :key="item.work_id"
                  class="div_bottom"
                >
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dis: true,
      // 下级架构
      lowerFramework: [{ department_name: "" }],
      // 公司名称
      corporateName: "OR",
      arr: [],
      // 当前领导
      dangQianLingDao: [{ name: "" }],
      // 当前部门
      dangQianBuMen: "",
      // 总人数
      totalNumber: 0,
      // 数据表格
      tableData: [],
      // 原型链
      // 左边搜索框
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      //添加公司
      dialogVisible: false,
      labelPosition: "right",
      addCompany: {
        com: "",
      },
      // 添加人员
      addPeople: false,
      labelAddPeople: "right",
      formLabelAlign: {
        name: "" /* 员工名称 */,
        num: "" /* 账号 */,
        psd: "" /* 密码 */,
        phone: "" /* 员工手机 */,
        post: "" /* 岗位 */,
        department: "" /* 部门 */,
        sex: "男" /* 员工性别 */,
        staffClass: "实习" /* 员工类型 */,
        region: "" /* 员工角色 */,
        time: "" /*入职时间  */,
        job: "" /* 员工工号 */,
        idcard: "" /* 身份证 */,
      },
    };
  },
  // 监听
  watch: {
    // 过滤数状
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    // 原型链点击事件
    handleNodeClick(data, a, d) {
      if (data.label != "OR") {
        this.dis = false;
        this.dangQianBuMen = data.label;
        this.$axios({
          url: "/staffAdmin/qieHuanOrg",
          params: {
            department: data.label,
          },
        }).then((res) => {
          this.dangQianLingDao = res.data.data2;
          this.tableData = res.data.data;
        });
      } else {
        this.dangQianLingDao = [{ name: "老大" }];
        this.dangQianBuMen = "";
        this.dis = true;
        this.postGet();
      }
    },
    // 过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 添加公司
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加人员
    handlePeople(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // ajax函数渲染页面
    async postGet() {
      const { data: res } = await this.$axios({
        url: "/staffAdmin/getOrg",
      });
      this.tableData = res.data[0];
      this.dangQianLingDao = [{ name: "老大" }];
    },
    // 树状
    async postGet2() {
      const { data: res } = await this.$axios({
        url: "/staffAdmin/ceshi",
      });
      this.data = res.data;
    },
  },
  mounted() {
    // 执行 Ajax123
    this.postGet();
    this.postGet2();
  },
};
</script>

<style lang="less" scoped>
#staff-project {
  box-sizing: border-box;
  padding: 1.5% 2%;
  background: rgb(242, 242, 242);
  height: 100%;
}

// 顶部标题
.employee-hui {
  color: #666;
}

// 主内容
.project-box {
  height: 100%;
  display: flex;
  margin: 1.5% 0 0 0;
  box-sizing: border-box;
  background: #fff;
}

// 容器左
.project-left {
  flex: 1;
  margin: 1.5% 0 0 0;
  padding: 0 0 10% 0;
  border-right: 1px solid #ccc;
  // 搜索
  .project-left-sousuo {
    display: flex;
    justify-content: center;
  }
  .project-left-sousuo .el-input {
    width: 83.7%;
  }

  // 按钮容器
  .project-left-box {
    box-sizing: border-box;
    padding: 0 8%;
    margin: 5% 0 0 0;
    display: flex;
    justify-content: center;
  }

  .project-left-box .el-button {
    height: 34px;
    width: 166px;
    line-height: 0;
  }

  // 原型链
  .project-left-chain {
    margin: 5% 0 0 0;
    padding: 0 8%;
  }
}

// 容器右
.project-right {
  margin: 1.5% 2%;
  box-sizing: border-box;
  flex: 3;

  // 标题
  // 按钮
  .project-right-title-btn {
    margin: 0 0 1% 0;
  }
  .project-right-title-btn span {
    margin: 0 1% 0 0;
    font-size: 18px;
  }

  /deep/.project-right-title-btn .el-button {
    height: 34px;
    line-height: 0;
  }

  // 导航
  .project-right-title-dh {
    color: #2d8cf0;
    margin: 0 0 1% 0;
  }

  // 领导
  .project-right-title-ld :nth-child(1) {
    color: #666;
  }
  .project-right-title-ld :nth-child(2) {
    color: #2d8cf0;
  }

  // 下级架构
  .project-right-framework-hui {
    margin: 1% 0 0 0;
    box-sizing: border-box;
    padding: 0.5% 1%;
    display: flex;
    align-items: center;
    background: rgb(246, 246, 246);
  }

  .project-right-framework-hui-left {
    flex: 2.2;
  }
  .project-right-framework-hui-right {
    flex: 1;
  }
  .project-right-framework-hui-right .el-button {
    height: 31px;
    line-height: 0;
  }

  // 线
  .project-right-line .div_bottom {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 1%;
    color: #999;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }

  .project-right-line div span {
    margin: 0 0 0 1%;
  }
  // 新增样式
  .forSelect2 {
    display: flex;
    align-items: center;
    margin: 0 0 24px 0;
    box-sizing: border-box;
    padding: 0 63px 0 39px;
  }
  .forSelect2 span {
    margin: 0 12px 0 0;
  }
  .forSelect2 .el-select {
    width: 38.8%;
  }

  .forSelect2 .el-select:first-of-type {
    margin: 0 37px 0 0;
  }

  // 员工时间
  .employee-time {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0 0 1.5%;
  }

  .employee-time .block {
    margin: 0 6.6% 0 0;
    width: 202px;
  }

  // 账号密码
  .employee-number {
    margin: 3% 0 0 0;
    display: flex;
  }
  // 姓名-性别
  .employee-name-sex {
    display: flex;
  }
  // 工号-身份证---
  .employee-ad3 {
    margin: 3% 0 0 0;
  }
  .employee-ad3 .el-input {
    width: 91.7%;
  }

  .employee-imge {
    box-sizing: border-box;
    display: flex;
    margin: 0 0 22px 0;
  }

  // 右边距
  .employee-imge .el-form-item {
    margin: 0 4.5% 0 0;
  }
  // radio 右边距
  /deep/.employee-imge .el-radio {
    margin-right: 5px;
  }
}
</style>